<%include ../top.html %>
<link href="/wxapp/activity/css/style.css" rel="stylesheet" type="text/css" />



<body>
<header class="toper">
	<div class="top">
    	<a href="javascript:history.go(-1)" class="prev"><</a>
        <span>转一转</span>
  </div>
</header>
<section class="Contain">
	<img src="/wxapp/activity/images/top_img.jpg" class="top_img" />
    <div class="turntable">
    	<img src="/wxapp/activity/images/turntable.jpg">
        <ul>
            <li class="li1"><span>一等奖</span></li>
            <li class="li2"><span>谢谢参与</span></li>
            <li class="li3"><span>三等奖</span></li>
            <li class="li4"><span>幸运奖</span></li>
            <li class="li5"><span>二等奖</span></li>
            <li class="li6"><span>再接再厉</span></li>
        </ul>
        <div class="turn_btn"><img src="/wxapp/activity/images/trunbtn.png"></div>
    </div>
    <img src="/wxapp/activity/images/bottom_img.jpg" class="bottom_img" />
</section>
<footer class="bottomer">
	<div class="bottom">
    	<div class="titlebg">
            <div class="title">
                <i></i>奖项设置：
            </div>
        </div>
        <div class="con">
        	<ul>
            	<li><span class="left">一等奖：</span><span class="right">一等奖</span></li>
            	<li><span class="left">二等奖：</span><span class="right">二等奖</span></li>
            	<li><span class="left">三等奖：</span><span class="right">三等奖</span></li>
            </ul>
        </div>
    </div>
</footer>

<div class="alertConbg">
    <div class="alertCon">
        <span class="close">X</span>
        <div class="con"></div>
    </div>
</div>
<script type="text/javascript">

    var $this=$(".turn_btn"),
        _mousedown="1",
        rotate=3600,
        time=5000,
        max=[];

	$this.click(function(){
        if(_mousedown=="2"){
            return false;
        }

        //随机数
        max=parseInt(Math.random()*360,10)+1;

        if(max>0&&max<=60){
            max=30;
        }else if(max>60&&max<=120){
            max=90;
        }else if(max>120&&max<=180){
            max=150;
        }else if(max>180&&max<=240){
            max=210;
        }else if(max>240&&max<=300){
            max=270;
        }else if(max>300&&max<=360){
            max=330;
        }

        //给动画加上旋转时间以及旋转角度
        $(this).css({"transform":"rotate(" + (rotate + max) + "deg)","-webkit-transform":"rotate(" + (rotate + max) + "deg)","transition":"all " + time + "ms","webkit-transition":"all " + time + "ms"});

        setTimeout(function(){

            //提示层出现
            $(".alertConbg").css({"z-index":"3","opacity":"1"});

            if(max==30){
                $(".alertConbg .con").html("恭喜您抽中一等奖");
            }else if(max==90){
                $(".alertConbg .con").html("很遗憾，谢谢参与");
            }else if(max==150){
                $(".alertConbg .con").html("恭喜您抽中三等奖");
            }else if(max==210){
                $(".alertConbg .con").html("恭喜您抽中幸运奖");
            }else if(max==270){
                $(".alertConbg .con").html("恭喜您抽中二等奖");
            }else if(max==330){
                $(".alertConbg .con").html("再接再厉！");
            }

            //动画旋转完固定指针角度
            $this.attr("style","transform:rotate(" + max + "deg); -webkit-transform:rotate(" + max + "deg)")

            _mousedown="1";
        },time)
        
        _mousedown="2";

	});
    //关闭提示层
    $(".alertCon .close").click(function(){
        $(this).parents(".alertConbg").attr("style","");
    })
</script>
</body>
</html>